import React, { Component } from 'react';
import Attachment from './attachment';
import Util from './util';
import ExpenseAdjunctDetail from './expense-adjunct-detail';
import TemplateHoc from '../component/template-hoc';
import ExpenseAdjunctService from './expense-adjunct-service';
import { deepCopy } from 'share/common';
import { Resizable } from 'react-resizable';
import { getAttachment }  from 'containers/expense/util';

@TemplateHoc
class ExpenseAdjunctRead extends Component {

  static contextTypes = {
    currentExpense: React.PropTypes.object,
    isWaitForAudit: React.PropTypes.bool
  };

  constructor(props) {
    super(props);
    this.state = {
      attachHeight: window.innerHeight / 2,
      isPopup: window.localStorage.getItem('expense-adjunct-pop-mode') === 'true' && props.currentAttachment &&  props.currentAttachment.attachmentOID,
      ...this.initData(props)
    };
  }

  initData = (props) => {
    const { mergeAdjuncts, currentAttachmentIndex, currentFlag, currentAdjunct, currentAttachment, } = props;
    return {
      currentFlag,
      mergeAdjuncts: deepCopy(mergeAdjuncts),
      currentAdjunct,
      currentAttachment,
      currentAttachmentIndex,
      labelFilter: []
    };
  };

  componentWillReceiveProps(nextProps) {
    if ((nextProps.randomHash !== this.props.randomHash) || (nextProps.currentAdjunct.id !== this.state.currentAdjunct.id && nextProps.isListMode !== this.props.isListMode)) {
      this.setState({
        ...this.initData(nextProps)
      });
    }
  };

  handleIsPop = (isPopup) => {
    window.localStorage.setItem('expense-adjunct-pop-mode', isPopup);
    this.setState({ isPopup });
  };

  handleChangeAttachment = () => {
    return this.refs.util ? this.refs.util.handleChangeAttachment : () => {};
  };

  handleUtil = (type) => {
    if (type === 'list') {
      this.props.handleModeChange(true);
      return;
    }
    this.refs.attachment.getWrappedInstance().handleOperate(type);
  };

  handleUtilChange = (params) => {
    const { isRestData, isChecked, labelFilter } = params;
    const { currentExpense } = this.context;
    let { mergeAdjuncts, currentFlag, currentAttachment } = this.state;
    if (isRestData) {
      ExpenseAdjunctService.resetData(currentExpense, labelFilter, mergeAdjuncts);
      if (currentFlag === 'invoice') {
        this.setState({
          mergeAdjuncts,
          currentAdjunct: mergeAdjuncts[0].body[0],
          currentAttachment: getAttachment(mergeAdjuncts[0].body[0]),
          currentAttachmentIndex: 0,
          ...params
        });
      } else {
        this.setState({
          mergeAdjuncts,
          ...params
        });
      }
    } else {
      if (isChecked) {
        const { checked } = params;
        this.props.handleAttachmentChecklist(currentAttachment.id, checked);
      }
      this.setState(params);
    }
  };

  onResize = (event, { size }) => {
    let maxHeight = document.body.clientHeight;
    if ((maxHeight - 300) > size.height && size.height > 100) {
      this.setState({ attachHeight: size.height });
    }
  };

  render() {
    const { attachHeight, currentAttachment, labelFilter, currentFlag, mergeAdjuncts, currentAdjunct, currentAttachmentIndex, isPopup } = this.state;
    const { receiptLabels, receiptLabelsDesc, receiptChanges, annotates, refreshAnnotate, attachmentChecklist, onInvoiceChange, randomHash, isEditing } = this.props;
    return (
      <section className="expense-adjunct-read-mode">
        <Resizable
          width={0}
          height={attachHeight}
          onResize={this.onResize}
        >
          <section style={{ height: isPopup ? 0 : attachHeight }}>
            <Attachment
              ref={'attachment'}
              currentAttachment={currentAttachment}
              checked={attachmentChecklist[currentAttachment.id]}
              randomHash={randomHash}
              onChange={this.handleIsPop}
              isPopup={isPopup}
            />
          </section>
        </Resizable>
        <section
          style={{
          height: isPopup ? `calc(100vh - 90px)` : `calc(100vh - 90px - ${attachHeight}px )`,
          position: 'relative'
          }}
        >
          <Util
            ref={'util'}
            style={{margin: isPopup ? '0' : '20px'}}
            receiptLabels={receiptLabels}
            labelFilter={labelFilter}
            currentFlag={currentFlag}
            mergeAdjuncts={mergeAdjuncts}
            currentAdjunct={currentAdjunct}
            currentAttachmentIndex={currentAttachmentIndex}
            handleUtil={this.handleUtil}
            randomHash={randomHash}
            onChange={this.handleUtilChange}
            attachmentChecklist={attachmentChecklist}
            currentAttachment={currentAttachment}
          />

          <ExpenseAdjunctDetail
            key={currentAdjunct.id}
            receiptLabelsDesc={receiptLabelsDesc}
            receiptChanges={receiptChanges}
            currentFlag={currentFlag}
            currentAdjunct={currentAdjunct}
            annotates={annotates}
            isEditing={isEditing}
            randomHash={randomHash}
            onInvoiceChange={onInvoiceChange}
            refreshAnnotate={refreshAnnotate}
          />
        </section>
      </section>
    );
  }
}

ExpenseAdjunctRead.propTypes = {};

export default ExpenseAdjunctRead;
